<template>
	<div>
		<cc-table-modify
			:items="roomTypes"
			with-delete
			@add="roomTypeDialogVisible = true"
			@change="handleRoomTypesChange"
		>
			<!-- 顶部工具栏 -->
			<template #title>
				<el-input
					placeholder="请输入房型名称关键词"
					v-model="filterInfo.title"
					class="input-with-select"
					@change="getRoomTypes"
				>
					<el-select v-model="filterInfo.isBed" slot="prepend" placeholder="请选择" @change="getRoomTypes">
						<el-option label="标准房型" :value="false"></el-option>
						<el-option label="床位房型" :value="true"></el-option>
					</el-select>
				</el-input>
			</template>

			<!-- 表格区域 -->
			<template #default>
				<el-table-column type="expand" v-if="!filterInfo.isBed">
					<template v-slot="scope">
						<cc-tag-group
							type="select"
							size="small"
							:items="scope.row.children"
							:selections="bedRoomTypes"
							:config="tagGroupConfig"
							@modify="onModifyTagGroup(scope.row, $event)"
						/>
					</template>
				</el-table-column>

				<el-table-column label="房型名称" prop="title">
					<template v-slot="scope">
						<el-input
							v-model="scope.row.title"
							@change="handleRoomTypeInputChange"
							@blur="handleRoomTypeInputBlur(scope.row)"
						/>
					</template>
				</el-table-column>

				<el-table-column label="英文名称-单数" prop="singularTitle_en">
					<template v-slot="scope">
						<el-input
							v-model="scope.row.singularTitle_en"
							@change="handleRoomTypeInputChange"
							@blur="handleRoomTypeInputBlur(scope.row)"
						/>
					</template>
				</el-table-column>

				<el-table-column label="英文名称-复数" prop="pluralTitle_en">
					<template v-slot="scope">
						<el-input
							v-model="scope.row.pluralTitle_en"
							@change="handleRoomTypeInputChange"
							@blur="handleRoomTypeInputBlur(scope.row)"
						/>
					</template>
				</el-table-column>
			</template>

			<!-- 右侧操作按钮 -->
			<template #operate>
				<el-table-column label="操作" width="60px">
					<template slot-scope="scope">
						<!-- <el-tooltip class="item" effect="dark" content="编辑床位" placement="top">
							<el-button
								type="warning"
								icon="el-icon-edit"
								size="mini"
								@click="handleBedsDialogOpen(scope.row)"
							/>
						</el-tooltip>-->
						<el-tooltip class="item" effect="dark" content="编辑匹配项" placement="top">
							<el-button
								type="primary"
								icon="el-icon-edit"
								size="mini"
								@click="handleMatchesDialogOpen(scope.row)"
							/>
						</el-tooltip>
					</template>
				</el-table-column>
			</template>
		</cc-table-modify>

		<!-- 添加房型弹出面板 -->
		<el-dialog
			title="添加房型"
			:visible.sync="roomTypeDialogVisible"
			width="50%"
			@closed="$refs.roomTypeFormRef.resetFields()"
		>
			<el-form
				:model="roomType"
				ref="roomTypeFormRef"
				:rules="roomTypeRules"
				:label-width="formLabelWidth"
			>
				<el-form-item label="房型名称" prop="title">
					<el-input v-model="roomType.title" />
				</el-form-item>

				<el-form-item label="是否为床位房型" prop="isBed">
					<el-switch v-model="roomType.isBed" active-color="#13ce66" inactive-color="#ff4949" />
				</el-form-item>

				<el-form-item label="英文代称-单数" prop="singularTitle_en">
					<el-input v-model="roomType.singularTitle_en" />
				</el-form-item>

				<el-form-item label="英文代称-复数" prop="pluralTitle_en">
					<el-input v-model="roomType.pluralTitle_en" />
				</el-form-item>
			</el-form>

			<!-- 底部按钮 -->
			<div slot="footer" class="dialog-footer">
				<el-button @click="roomTypeDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleRoomTypeDialogConfirm">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 编辑匹配项弹出面板 -->
		<el-dialog title="编辑匹配项" :visible.sync="matchesDialogVisible" width="70%" @closed="resetRoomType">
			<cc-table-modify
				title="匹配项"
				with-delete
				hide-confirm
				:max-table-height="320"
				:items="roomType.matches"
				@change="handleMatchesChange"
			>
				<template>
					<el-table-column label="匹配值" prop="value">
						<template v-slot="scope">
							<el-input v-model="scope.row.value" />
						</template>
					</el-table-column>
				</template>
			</cc-table-modify>

			<!-- 底部按钮 -->
			<div slot="footer" class="dialog-footer">
				<el-button @click="matchesDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleMatchesDialogConfirm">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 编辑床位弹出面板 -->
		<!-- <el-dialog title="编辑床型" :visible.sync="bedsDialogVisible" width="60%" @closed="resetRoomType">
			<cc-table-modify
				title="床位列表"
				with-delete
				hide-confirm
				:max-table-height="320"
				:items="roomType.beds"
				:default-item="{ type: '', count: 1 }"
				@change="handleBedsChange"
			>
				<template>
					<el-table-column prop="type" label="床位类型">
						<template v-slot="scope">
							<el-select v-model="scope.row.type" filterable value-key="_id" placeholder="请选择">
								<el-option v-for="item in bedTypes" :key="item._id" :label="item.title" :value="item._id"></el-option>
							</el-select>
						</template>
					</el-table-column>

					<el-table-column label="序号" prop="serial" width="140px">
						<template v-slot="scope">
							<el-input v-model="scope.row.serial"></el-input>
						</template>
					</el-table-column>
				</template>
			</cc-table-modify>

			<div slot="footer" class="dialog-footer">
				<el-button @click="bedsDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleBedsDialogConfirm">确 定</el-button>
			</div>
		</el-dialog>-->
	</div>
</template>

<script>
	import _ from "lodash";

	import ccTagGroup from "@/components/cc-tag-group";
	import ccTableModify from "@/components/cc-table-modify";

	import roomTypeRules from "./form-rules/roomTypeRules";
	import childrenRules from "./form-rules/childrenRules";

	export default {
		name: "room-types-list",
		components: {
			"cc-tag-group": ccTagGroup,
			"cc-table-modify": ccTableModify
		},
		data() {
			return {
				// 筛选出的房型列表
				roomTypes: [],
				// 所有床位类型的房型列表
				bedRoomTypes: [],
				// 所有床位类型列表
				bedTypes: [],
				tagGroupConfig: {
					key: "_id",
					label: "title"
				},
				isRoomTypeChanged: false,
				// 标识编辑房型弹出框是否可见
				roomTypeDialogVisible: false,
				// 标识编辑房型匹配项弹出框是否可见
				matchesDialogVisible: false,
				// 标识编辑子房型项弹出面板是否可见
				bedsDialogVisible: false,
				// 房型匹配项的表单项标题标签的宽度
				formLabelWidth: "120px",
				// 将被添加/编辑的房型对象
				roomType: {
					title: "",
					isBed: false,
					singularTitle_en: "",
					pluralTitle_en: ""
				},
				// 添加/编辑房型的表单验证规则
				roomTypeRules,
				// 添加子房型项的表单验证规则
				childrenRules,
				// 房型筛选条件
				filterInfo: {
					isBed: false,
					title: ""
				}
			};
		},
		mounted() {
			this.getRoomTypes();
			this.getBedRoomTypes();
			this.getBedTypes();
		},
		computed: {},
		methods: {
			// 获取所有床位/非床位房型列表
			async getRoomTypes() {
				this.roomTypes = await this.$http.get(
					"/room-types",
					this.filterInfo
				);
			},
			async getBedRoomTypes() {
				this.bedRoomTypes = await this.$http.get("/room-types", {
					isBed: true
				});
			},
			async getBedTypes() {
				this.bedTypes = await this.$http.get("/bed-types");
			},
			// 发送添加/编辑房型请求
			async modifyRoomType(isAdd = false) {
				const method = isAdd ? "post" : "put";
				const url = isAdd
					? "/room-types"
					: `/room-types/${this.roomType._id}`;
				const res = await this.$http[method](url, this.roomType, true);
				res && this.getRoomTypes();
				this.resetRoomType();
			},
			resetRoomType() {
				this.roomType = {
					title: "",
					isBed: false,
					singularTitle_en: "",
					pluralTitle_en: ""
				};
			},
			// 房型编辑相关
			handleRoomTypeInputChange() {
				this.isRoomTypeChanged = true;
			},
			handleRoomTypeInputBlur(roomType) {
				if (!this.isRoomTypeChanged) return;
				this.isRoomTypeChanged = false;
				this.resetRoomType();
				this.modifyRoomType();
			},
			handleRoomTypeDialogConfirm() {
				this.$refs.roomTypeFormRef.validate(async valid => {
					if (!valid) return;
					await this.modifyRoomType(true);
					this.roomTypeDialogVisible = false;
				});
			},
			async handleRoomTypesChange(items, dItems) {
				const res = await this.$http.delete(
					`/room-types/${dItems.map(i => i._id).join("-")}`,
					undefined,
					true
				);
				if (!res) return;
				this.roomTypes = items;
			},

			// 匹配项编辑相关
			handleMatchesDialogOpen(roomType) {
				const { _id, matches } = roomType;
				this.roomType = {
					_id,
					matches: matches.map(i => ({ value: i }))
				};
				this.matchesDialogVisible = true;
			},
			handleMatchesChange(items) {
				this.roomType = {
					_id: this.roomType._id,
					matches: items
				};
			},
			handleMatchesDialogConfirm() {
				this.matchesDialogVisible = false;
				this.roomType.matches = this.roomType.matches
					.filter(i => i.value)
					.map(i => i.value);
				this.modifyRoomType();
			},

			// 床位编辑相关
			handleBedsDialogOpen(roomType) {
				this.roomType = {
					_id: roomType._id,
					beds: roomType.beds
				};
				this.bedsDialogVisible = true;
			},
			handleBedsChange(items) {
				this.roomType = {
					_id: this.roomType._id,
					beds: items
				};
			},
			async handleBedsDialogConfirm() {
				this.bedsDialogVisible = false;
				const roomType = this.roomTypes.find(
					i => i._id === this.roomType._id
				);
				const idStr = roomType.beds
					.filter(i => !this.roomType.beds.includes(i))
					.map(i => i._id)
					.join("-");
				const deleteRes =
					idStr && (await this.$http.delete(`/beds/${idStr}`));
				const res =
					(!idStr || deleteRes) &&
					(await this.$http.put("/beds", this.roomType.beds));
				if (!res) return;
				this.roomType.beds = res.filter(i => i.type).map(i => i._id);
				this.modifyRoomType();
			},
			async onModifyTagGroup(row, value) {
				const res = await this.$http.put(
					`/room-types/${row._id}`,
					{ children: value.map(i => i._id) },
					true
				);
				if (!res) return;
				row.children = value;
			}
		}
	};
</script>
<style lang="scss">
	.btn-add {
		float: right;
	}
	.input-with-select {
		margin: 0 20px;
		.el-input-group__prepend {
			background-color: #fff;
		}
		.el-select .el-input {
			width: 120px;
		}
	}
	.expand-child {
		font-size: 30px;
	}
</style>
